//风控管理 - 执行记录

import React, { Component } from 'react';
import { LocaleProvider, Icon, Button, Form , Input, Row, Col, Table, Tag, Drawer } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import Details from '../../../components/Details';

const FormItem = Form.Item;
const { Column } = Table;

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
    key: i,
    number: `${1096333-i}`,
    executeDate: '2018-12-14 11:24:21',
    name: '肖小兰',
    phone: '13724707154',
    IDnumber:'440802198101161546',
    PTS:`${70-i}`,
    overallResult:['通过'],
    cz:['查看详情']
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class Execution extends Component {
  state = {
    selectedRowKeys: [],
    visible: false
  };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
      bankDrawer: false,
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
	}
	
	handleSearch = () => {
		console.log(1);
  }
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
    const { getFieldDecorator } = this.props.form;
    
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <div>
              <Icon type="appstore" />
              <span className="apply-font">执行记录</span>
              <div className="btn">
                <Button icon="redo" size="small">刷新</Button>
                <Button icon="delete" size="small" onClick={this.handleDelete}>清空</Button>
                <Button icon="search" size="small" type="primary" htmlType="submit" onClick={this.handleSearch}>搜索</Button>
              </div>
            </div>
          </div>   
          <div className="line"></div>
          <div className="per-info">
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Row>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('name', {
                      rules: [{ required: true, message: 'Please input your name!' }],
                    })(
                      <Input placeholder="姓名" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )}           
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('phone', {
                      rules: [{ required: true, message: 'Please input your phone!' }],
                    })(
                      <Input placeholder="手机号" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )}
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('IDnumber', {
                      rules: [{ required: true, message: 'Please input your IDnumber!' }],
                    })(
                      <Input placeholder="身份证号" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )} 
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered dataSource={data}>
              <Column title='编号' align='center' dataIndex='number' width='50' />
              <Column title='执行时间' align='center' dataIndex='executeDate' width='80' />
              <Column title='姓名' align='center' dataIndex='name' width='50' />
              <Column title='手机号' align='center' dataIndex='phone' width='90' />
              <Column title='身份证' align='center' dataIndex='IDnumber' width='120' />
              <Column title='总得分' align='center' dataIndex='PTS' width='60' />
              <Column title='总结果' align='center' dataIndex='overallResult' width='60' 
                render={overallResult => (
                  <span>
                    {overallResult.map(overallResult => <Tag color="green" key={overallResult}>{overallResult}</Tag>)}
                  </span>
                )} />
              <Column title='操作' align='center' dataIndex='cz' width='130' 
                render={cz => (
                  <span>
                    {cz.map(cz => <Tag color="blue" key={cz} onClick={this.showDrawer}>{cz}</Tag>)}
                  </span>
                )} />
            </Table>
          </div>
          <Drawer
          title="详情"
          placement="right"
          width="80%"
          onClose={this.onClose}
          visible={this.state.visible}
          >
            <Details />
          </Drawer>
        </div> 
      </LocaleProvider> 
		);
	}
}

const ExecuteForm = Form.create()(Execution);

export default ExecuteForm;